<template>
  <div class="contact-container" v-if="windowWidth >992">
    <div id="crumbs" class="max-1200">
      <img src="@/assets/icon/weizhi.png" alt="" class="ic"/>
      <a href="/">{{
          globalLanguage.languageSuffix == "Cn" ? "首页" : "Главная страница"
        }}</a>
      &gt;
      <router-link to="/contant">{{
          globalLanguage.languageSuffix == "Cn" ? "联系我们" : "Свяжитесь с нами"
        }}
      </router-link>
    </div>
    <div class="info max-1200">
      <h3
          class="line-height-4"
          style="
          box-sizing: border-box;
          font-family: Montserrat, -apple-system, BlinkMacSystemFont;
        "
      >
        <span style="font-size: 24px"
        >{{
            globalLanguage.languageSuffix == "Cn" ? "风速达(广州)进出口贸易有限公司(广州总部)" : "Fengsheida (Гуанчжоу) Import and Export Trade Co., Ltd. (штаб - квартира в Гуанчжоу)"
          }}</span
        >
      </h3>
      <p><br/></p>
      <p
          style="
          box-sizing: border-box;
          margin-top: 0px;
          margin-bottom: 1rem;
          color: rgb(33, 37, 41);
          white-space: normal;
          background-color: rgb(255, 255, 255);
        "
      >
        <strong
            style="box-sizing: border-box">{{ globalLanguage.languageSuffix == "Cn" ? "联系人" : "Контактные лица" }}</strong>：{{ globalLanguage.languageSuffix == "Cn" ? "陈先生" : "Mr. Chen" }}
      </p>
      <p
          style="
          box-sizing: border-box;
          margin-top: 0px;
          margin-bottom: 1rem;
          color: rgb(33, 37, 41);
          white-space: normal;
          background-color: rgb(255, 255, 255);
        "
      >
        <strong style="box-sizing: border-box">{{ globalLanguage.languageSuffix == "Cn" ? "电话" : "Телефон" }}</strong>：&nbsp;(020)
        3192
        9695
      </p>
      <p
          style="
          box-sizing: border-box;
          margin-top: 0px;
          margin-bottom: 1rem;
          color: rgb(33, 37, 41);
          white-space: normal;
          background-color: rgb(255, 255, 255);
        "
      >
        <strong
            style="box-sizing: border-box">{{ globalLanguage.languageSuffix == "Cn" ? "手机" : "Мобильные телефоны" }}</strong>：18188888813
      </p>
      <p
          style="
          box-sizing: border-box;
          margin-top: 0px;
          margin-bottom: 1rem;
          color: rgb(33, 37, 41);
          white-space: normal;
          background-color: rgb(255, 255, 255);
        "
      >
        <strong
            style="box-sizing: border-box">{{ globalLanguage.languageSuffix == "Cn" ? "邮箱" : "Почтовый ящик" }}</strong
        >：blackjack2831@126.com
      </p>
      <p
          style="
          box-sizing: border-box;
          margin-top: 0px;
          margin-bottom: 1rem;
          color: rgb(33, 37, 41);
          white-space: normal;
          background-color: rgb(255, 255, 255);
        "
      >
        <strong
            style="box-sizing: border-box">{{ globalLanguage.languageSuffix == "Cn" ? "广州总部" : "Штаб - квартира в Гуанчжоу" }}</strong
        >：{{ globalLanguage.languageSuffix == "Cn" ? "广州市白云区聚龙地铁站聚荟广场1308" : "Станция метро Julong, район Байюнь, Гуанчжоу" }}
      </p>
      <h3
          class="line-height-4"
          style="white-space: normal; box-sizing: border-box"
      >
        <span style="font-size: 24px"><br/></span>
      </h3>
      <!-- <h3
        class="line-height-4"
        style="white-space: normal; box-sizing: border-box"
      >
        <span style="font-size: 24px"
          >风速达(广州)进出口贸易有限公司（莫斯科分部）</span
        >
      </h3>
      <p>
        <span style="font-size: 24px"><br /></span>
      </p>
      <p>
        <strong><span style="font-size: 16px">联系人</span></strong
        ><span style="font-size: 16px"
          ><span
            style="color: rgb(33, 37, 41); background-color: rgb(255, 255, 255)"
            >：Анатолий</span
          ></span
        >
      </p>
      <p>
        <span style="font-size: 16px"
          ><span
            style="color: rgb(33, 37, 41); background-color: rgb(255, 255, 255)"
            ><br /></span
        ></span>
      </p>
      <p>
        <span style="font-size: 16px"
          ><strong
            style="
              color: rgb(33, 37, 41);
              white-space: normal;
              box-sizing: border-box;
            "
            >电话</strong
          ><span
            style="color: rgb(33, 37, 41); background-color: rgb(255, 255, 255)"
            >：<span style="font-family: ">+79775888889</span></span
          ></span
        >
      </p>
      <p>
        <span style="font-size: 16px"
          ><span
            style="color: rgb(33, 37, 41); background-color: rgb(255, 255, 255)"
            ><span style="font-family: "><br /></span></span
        ></span>
      </p>
      <p>
        <span style="font-size: 16px"
          ><strong
            style="
              color: rgb(33, 37, 41);
              white-space: normal;
              box-sizing: border-box;
            "
            >邮箱</strong
          ><span
            style="color: rgb(33, 37, 41); background-color: rgb(255, 255, 255)"
            >：esudagz@yandex.ru</span
          ></span
        >
      </p>
      <p>
        <span style="font-size: 16px"
          ><span
            style="color: rgb(33, 37, 41); background-color: rgb(255, 255, 255)"
            ><br /></span
        ></span>
      </p>
      <p>
        <span style="font-size: 16px"
          ><strong>地址</strong>：Москва, ул. Ибрагимова, 31. Бизнес центр
          РТС&nbsp; Офис 305</span
        >
      </p> -->
      <p><br/></p>
      <p><br/></p>
      <p><br/></p>

    </div>
  </div>
  <div class="mbppp" v-else>
    <div class="map">
<!--      <iframe src="/template/web/default/article/map.html" frameborder="0"></iframe>-->
    </div>
    <!--面包屑 -->
    <el-breadcrumb separator="/" style="padding: 20px">
      <el-breadcrumb-item :to="{ path: '/' }">{{ globalLanguage.languageSuffix == 'Cn' ? '首页' : 'главная' }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ globalLanguage.languageSuffix == 'Cn' ? '联系我们' : 'контакты' }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="infogz">
      <h3 class="line-height-4">{{
          globalLanguage.languageSuffix == "Cn" ? '风速达(广州)风速达货运代理有限公司（广州总部）' : 'FengSuDa-компания(Гуанчжоу)'
        }}</h3>
      <div class="info">
        <p class="info-item">
          <strong>{{ globalLanguage.languageSuffix =='Cn' ? '联系人：' : 'Contact：' }}</strong>
          <span>{{ globalLanguage.languageSuffix == 'Cn' ? '陈先生' : 'Mr. Chen' }}</span>
        </p>
        <p class="info-item">
          <strong>{{ globalLanguage.languageSuffix == 'Cn' ? '电话：' : 'Phone：' }}</strong>
          <span>13600008684</span>
        </p>
        <p class="info-item">
          <strong>{{ globalLanguage.languageSuffix == 'Cn' ? '手机:' : 'Tel:' }}</strong>
          <span>13600008684</span>
        </p>
        <p class="info-item">
          <strong>{{ globalLanguage.languageSuffix == 'Cn' ? '邮箱:' : 'Email:' }}</strong>
          <span>blackjack2831@126.com</span>
        </p>
        <p class="info-item">
          <strong>{{ globalLanguage.languageSuffix == 'Cn' ? '总部:' : 'Address:' }}</strong>
          <span>{{
              globalLanguage.languageSuffix == 'Cn' ? '广州市白云区松洲街高桥路三街25号103室' : 'Room 103, No. 25, Third Street, Gaoqiao Road, Songzhou Street, Baiyun District, Guangzhou City'
            }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, onUnmounted, ref} from "vue";

const windowWidth = ref(window.innerWidth); // 用于判断当前窗口宽度
const handleResize = () => {
  windowWidth.value = window.innerWidth;
};
onMounted(() => {
  // 初始化 windowWidth
  windowWidth.value = window.innerWidth;
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>

<style>
.contact-container .info {
  padding: 3.125rem 0 11.25rem;
}
.map {
  margin-top: -65px !important;
  width: 100%;
  height: 200px;
  background: url("@/assets/img/map.png") no-repeat center;
  background-size: cover;
}
.infogz {
  padding: 20px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.infogz .info {
  margin-top: 10px;
}

.infogz .line-height-4 {
  font-size: 22px;
  width: 100%;
  line-height: 1.5;
  text-align: left;
}

.info-item {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  margin-top: 0;
  margin-bottom: 1rem;
  color: rgb(33, 37, 41);
  white-space: normal;
  background-color: rgb(255, 255, 255);
  font-size: 12px;
}

.info-item strong {
  min-width: 70px; /* 设置最小宽度 */
  text-align: left; /* 左对齐 */
}

.info-item span {
  margin-left: 5px; /* 设置间隔 */
}
</style>
